﻿<%@ Page Title="" Language="C#" MasterPageFile="~/skin.Master" AutoEventWireup="true" CodeBehind="check.aspx.cs" Inherits="DataShow.check.EuropeCheck" %>

<asp:Content ID="headers" ContentPlaceHolderID="home_header" runat="server">
    <link rel="stylesheet" href="/css/compiled/form-showcase.css" type="text/css" media="screen" />
    <link href="/css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />
    <style>
        .nobgcolor {
            background-color: none;
        }
        .fp {
            display:inline-block;
            width:118px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="cph_home" runat="server">
    <div style="margin-top: 10px;">
        <ul class="breadcrumb">
            <li><a href="<%:IndexURL %>">首页</a> <span class="divider">/</span></li>
            <li><a href="<%:CheckURL %>">预报核查</a> <span class="divider">/</span></li>
            <li class="active"><%:Name %></li>
        </ul>
    </div>

    <div class="row-fluid" id="tip" style="display: none">
        <div>当前进度：步骤(<span id="sp_current_step"></span>/<span id="sp_total_step"></span>),<span id="sp_message"></span>,已用时：<span id="sp_time_out"></span><span>秒</span>,大概剩余时间：<span id="sp_need_time"></span><span>秒</span></div>
        <div class="progress progress-striped active">
            <div class="bar" style="width: 20%;"></div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>加载条件</h5>
                </div>
                <div class="widget-content nopadding">
                    <h4>日期选择</h4><br />
                    <asp:CheckBox runat="server" ID="non_date" ClientIDMode="Static" Text="无预报数据日期筛选" Visible="false" />
                    <div class="field-box">
                        <label>开始日期:</label>
                        <asp:TextBox runat="server" ID="time_begin" CssClass="input-large datepicker" ClientIDMode="Static" AutoPostBack="false" />
                    </div>
                    <div class="field-box">
                        <label>结束日期:</label>
                        <asp:TextBox runat="server" ID="time_end" CssClass="input-large datepicker" ClientIDMode="Static" AutoPostBack="false" />
                    </div>
                    <hr />
                    <h4 class="inline">发报时刻</h4><br />
                    <input type="checkbox" id="chx_point_all" value="全选" checked="checked" /><label for="chx_point_all" title="全选">全选</label>
                    <br />
                    <input type="checkbox" id="chx_point_06" value="H06" class="chx_point" checked="checked"/><label for="chx_point_06">H06</label>
                    <input type="checkbox" id="chx_point_10" value="H10" class="chx_point" checked="checked"/><label for="chx_point_10">H10</label>
                    <input type="checkbox" id="chx_point_16" value="H16" class="chx_point" checked="checked"/><label for="chx_point_16">H16</label>
                    <hr />
                    <h4 class="inline">降水时效</h4><br />
                    <input type="checkbox" id="chx_rain_all" value="全选" /><label for="chx_rain_all" title="全选">全选</label>
                    <br />
                    <input type="checkbox" value="FD00_12" class="chx_rain" data-header="00-12小时" id="chx_rain_0012" data-weight="0" /><label for="chx_rain_0012">00-12</label>
                    <input type="checkbox" value="FD12_24" class="chx_rain" data-header="12-24小时" id="chx_rain_1224" data-weight="1"/><label for="chx_rain_1224">12-24</label>
                    <input type="checkbox" value="FD00_24" class="chx_rain" data-header="00-24小时" id="chx_rain_0024" data-weight="2" checked="checked" /><label for="chx_rain_0024">00-24</label><br />
                    <input type="checkbox" value="FD24_36" class="chx_rain" data-header="24-36小时" id="chx_rain_2436" data-weight="0" /><label for="chx_rain_0012">24-36</label>
                    <input type="checkbox" value="FD36_48" class="chx_rain" data-header="36-48小时" id="chx_rain_3648" data-weight="1" /><label for="chx_rain_1224">36-48</label>
                    <input type="checkbox" value="FD24_48" class="chx_rain" data-header="24-48小时" id="chx_rain_2448" data-weight="3" checked="checked" /><label for="chx_rain_2448">24-48</label><br />
                    <input type="checkbox" value="FD48_60" class="chx_rain" data-header="48-60小时" id="chx_rain_4860" data-weight="4" /><label for="chx_rain_4872">48-60</label>
                    <input type="checkbox" value="FD60_72" class="chx_rain" data-header="60-72小时" id="chx_rain_6072" data-weight="4" /><label for="chx_rain_4872">60-72</label>
                    <input type="checkbox" value="FD48_72" class="chx_rain" data-header="48-72小时" id="chx_rain_4872" data-weight="4" checked="checked" /><label for="chx_rain_4872">48-72</label><br />
                    <input type="checkbox" value="FD72_84" class="chx_rain" data-header="36-48小时" id="chx_rain_7284" data-weight="1" /><label for="chx_rain_7284">72-84</label>
                    <input type="checkbox" value="FD84_96" class="chx_rain" data-header="24-48小时" id="chx_rain_8496" data-weight="3" /><label for="chx_rain_8496">84-96</label>
                    <input type="checkbox" value="FD72_96" class="chx_rain" data-header="24-48小时" id="chx_rain_7296" data-weight="3" /><label for="chx_rain_7296">72-96</label><br />
                    <input type="checkbox" value="FD96_108" class="chx_rain" data-header="48-72小时" id="chx_rain_96108" data-weight="4" /><label for="chx_rain_4872">96-108</label>
                    <input type="checkbox" value="FD108_120" class="chx_rain" data-header="36-48小时" id="chx_rain_108120" data-weight="1" /><label for="chx_rain_7284">108-120</label>
                    <input type="checkbox" value="FD96_120" class="chx_rain" data-header="24-48小时" id="chx_rain_96120" data-weight="3" /><label for="chx_rain_8496">96-120</label><br />

                    <hr />
                    <h4 class="inline">气温时效</h4><br />
                    <input type="checkbox" id="chx_temp_all" value="全选" /><label for="chx_temp_all" title="全选">全选</label>
                    <br />
                    <input type="checkbox" id="chx_temp00_24" value="FD00_24" class="chx_temp" data-header="00-24小时" data-weight="0" checked="checked" /><label for="chx_temp00_24">00-24</label>
                    <input type="checkbox" id="chx_temp24_48" value="FD24_48" class="chx_temp" data-header="24-48小时" data-weight="1" checked="checked" /><label for="chx_temp24_48">24-48</label>
                    <input type="checkbox" id="chx_temp48_72" value="FD48_72" class="chx_temp" data-header="48-72小时" data-weight="2" checked="checked" /><label for="chx_temp48_72">48-72</label>
                    <input type="checkbox" id="chx_temp72_96" value="FD72_96" class="chx_temp" data-header="72-96小时" data-weight="2" /><label for="chx_temp72_96">72-96</label>
                    <input type="checkbox" id="chx_temp96_120" value="FD96_120" class="chx_temp" data-header="96-120小时" data-weight="2" /><label for="chx_temp96_120">96-120</label>

                    <hr />
                    <h4 class="inline">站点</h4><br />
                    <input type="checkbox" id="chx_site_all" value="全选"  /><label for="chx_site_all" title="全选">全选</label>
                    <br />
                    <input type="checkbox" id="chx_site_lyg" value="58044" class="chx_site" checked="checked"/><label for="chx_site_lyg">连云港</label>
                    <input type="checkbox" id="chx_site_dh" value="58036" class="chx_site" /><label for="chx_site_dh">东海</label>
                    <input type="checkbox" id="chx_site_gy" value="58040" class="chx_site" /><label for="chx_site_gy">赣榆</label>
                    <input type="checkbox" id="chx_site_gyun" value="58047" class="chx_site" /><label for="chx_site_gyun">灌云</label>
                    <input type="checkbox" id="chx_site_gn" value="58048" class="chx_site" /><label for="chx_site_gn">灌南</label>
                    <hr />
                    <h4 class="inline">对照站点</h4>
                    <br />
                    <br />
                    <table>

                    </table>
                    <input name="product" type="radio" class="product" id="chx_15" value="Zyt_CityFore" data-text="国家局" checked="checked" /><label for="chx_15" class="fp">国家局</label>
                    <input name="product" type="radio" id="chx_1" value="EC_ThinFore" class="product" data-text="欧洲中心预报" /><label for="chx_1" class="fp">欧洲中心预报</label>
                    <input name="product" type="radio" class="product" id="chx_2" value="EnsembleFore" data-text="欧洲集合" /><label for="chx_2" class="fp">欧洲集合</label><br />
                    <input name="product" type="radio" class="product" id="chx_3" value="T639Fore" data-text="T639" /><label for="chx_3" class="fp">T639</label>
                    <input name="product" type="radio" class="product" id="chx_4" value="GrapesFore" data-text="Grapes" /><label for="chx_4" class="fp">Grapes</label><br />
                    <input name="product" type="radio" class="product" id="chx_5" value="GfsFore" data-text="Gfs" /><label for="chx_5" class="fp">Gfs</label>
                    <input name="product" type="radio" class="product" id="chx_6" value="Jma_ThinFore" data-text="JmaThin" /><label for="chx_6" class="fp">JmaThin</label><br />
                    <input name="product" type="radio" class="product" id="chx_7" value="LYGwrfFore" data-text="连云港wrf" /><label for="chx_7" class="fp">连云港wrf</label>
                    <input name="product" type="radio" class="product" id="chx_8" value="SJwrfFore" data-text="省局wrf" /><label for="chx_8" class="fp">省局wrf</label><br />
                    <input name="product" type="radio" class="product" id="chx_9" value="SHwrfFore" data-text="上海wrf" /><label for="chx_9" class="fp">上海wrf</label>
                    <input name="product" type="radio" class="product" id="chx_10" value="TQZXFore" data-text="天气在线预报" /><label for="chx_10" class="fp">天气在线预报</label><br />
                    <input name="product" type="radio" class="product" id="chx_11" value="JSjxhFore" data-text="江苏精细化预报" /><label for="chx_11" class="fp">江苏精细化预报</label>
                    <input name="product" type="radio" class="product" id="chx_12" value="STFore" data-text="省台指导预报" /><label for="chx_12" class="fp">省台指导预报</label><br />
                    <input name="product" type="radio" class="product" id="chx_13" value="Wrf3kmFore" data-text="wrf3km" /><label for="chx_13" class="fp">wrf3km</label>
                    <input name="product" type="radio" class="product" id="chx_14" value="Wrf15kmFore" data-text="wrf15km" /><label for="chx_14" class="fp">wrf15km</label>
                    <input name="product" type="radio" class="product" id="chx_16" value="NmcFore" data-text="NmcFore" /><label for="chx_16" class="fp">NMC</label>
                    <hr />
                    <input type="button" id="btn_search" value="搜索" class="btn-primary btn" />
                </div>
            </div>
        </div>
        <div class="span9">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>降水分级</h5>
                </div>
                <div class="widget-content nopadding" style="overflow: scroll">
                    <table class="table table-bordered nobgcolor">
                        <tr id="rain_header">
                        </tr>
                        <tr id="rain_sub_title">
                        </tr>
                        <tbody id="rainbody">
                        </tbody>
                    </table>
                    
                </div>
            </div>
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>温度</h5>
                </div>
                <div class="widget-content nopadding" style="overflow: scroll">
                    
                    <table class="table table-bordered nobgcolor">
                        <tr id="temp_header">
                        </tr>
                        <tr id="temp_sub_title">
                        </tr>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
    </div>
</asp:Content>
<asp:Content runat="server" ID="scripts" ContentPlaceHolderID="home_script">
    <script src="/js/bootstrap.datepicker.js"></script>
    <script src="../js/jqget.js"></script>
    <script src="../js/guid.js"></script>
    <script type="text/javascript">
        var vheaders = { "小雨": "l1", "中雨": "l2", "大雨": "l3", "暴雨": "l4", "大暴雨": "l5", "特大暴雨": "l6", "小雪": "l8", "中雪": "l9", "大雪": "l10", "暴雪": "l11", "一般性降水": "g01", "暴雨(雪)以上": "g10", "0.1mm以上": "g25", "10mm以上": "g50", "25mm以上": "n1", "50mm以上": "n2", "晴(雨)检验(PC)": "pc" };
        var vtheader = { "最高温度": "maxt", "最低温度": "mint" };
        var filter_date = true;  //按照日期查找

        $("#non_date").click(function () {
            if (this.checked) {
                $("#time_begin").attr("disabled",true);
                $("#time_end").attr("disabled", true);
                filter_date = false;
            } else {
                $("#time_begin").removeAttr("disabled");
                $("#time_end").removeAttr("disabled");
                filter_date = true;
            }
        })

        

        var tid;//
        //画降雨表
        function DrawRainTable(data) {
            $("#rainbody").empty();
            var html = "";
            for (type in vheaders) {
                if (type == "小雨") {
                    html += "<tr><td rowspan='12'>分</br>级</br>检</br>验</td><td>" + type + "</td>";
                } else if (type == "0.1mm以上") {
                    html += "<tr><td rowspan='4'>分</br>级</br>检</br>验</td><td>" + type + "</td>";
                } else if (type == "晴(雨)检验(PC)") {
                    html += "<tr><td colspan='2'>晴(雨)检验(PC)</td>";
                } else {
                    html += "<td>" + type + "</td>";
                }
                for (span in data) {
                    var values = data[span];
                    var value = values[vheaders[type]];
                    html += ("<td>" + value.ts + "</td>");
                    html += ("<td>" + value.ss + "</td>");
                    html += ("<td>" + value.er + "</td>");
                    html += ("<td>" + value.lr + "</td>");
                }
                html += "</tr>";
            }
            $("#rainbody").append($(html));
        }
        //画温度表
        function DrawTempHTML(data) {
            $("#tbody").empty();
            var html = "";
            for (type in vtheader) {
                html += "<tr><td>" + type + "</td>";
                for (span in data) {
                    var values = data[span];
                    var value = values[[vtheader[type]]];
                    html += ("<td>" + value.mae + "</td>");
                    html += ("<td>" + value.rmse + "</td>");
                    html += ("<td>" + value.acc1 + "</td>");
                    html += ("<td>" + value.acc2 + "</td>");
                    html += ("<td>" + value.ss1 + "</td>");
                    html += ("<td>" + value.ss2 + "</td>");
                }
                html += "</tr>";
            }
            $("#tbody").append($(html));
        }

        var membertable = $.urlGet('type'); //取到表名
        $(".product").each(function () {
            if ($(this).val() == membertable.type) {
                $(this).remove();
            }
        })
        $("label").each(function () {
            if ($(this).text() == decodeURI(membertable.name)) {
                $(this).remove();
            }
        })
        var errorTimes =0;
        function ReadStatus() {
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: "<%:StatusInterface%>" + "?tid=" + tid + "&action=query",
                success: function (data) {
                    if (data.success == "True") {
                        var result = data.result.data;
                        for (key in result) {
                            
                            $("#sp_" + key).text(result[key]);

                        }
                        $("#sp_need_time").text(((result.total_step-result.current_step)/result.current_step*result.time_out).toFixed(2));
                        $(".bar").css("width", result.current_step / result.total_step * 100 + "%");
                    } else {
                        errorTimes++;
                        if (errorTimes >= 10) {
                            alert(data.msg);
                        }
                    }
                }
            })
        }
        var readswitch;
        //更新程序后台执行状态
        function Tip(tid) {
            $("#tip").fadeIn();
            $(".bar").css("width", "0%");
            readswitch = setInterval(ReadStatus, 3000);
        }

        //动态添加元素片段 以及 变量
        var header = "<th colspan='4'>{TEXT}</th>";
        var theader = "<th colspan='6'>{TEXT}</th>";
        var raintitle = "<td>TS</td><td>SS</td><td>空报率</td><td>漏报率</td>";
        var temptitle = "<td>平均绝对误差</td><td>均方根误差</td><td>小于1℃预报准确率</td><td>小于2℃预报准确率</td><td>1度技巧</td><td>2度技巧</td>";
        var rainleft = "<th colspan='2' rowspan='2'>降水分级</th>";
        var templeft = "<th rowspan='2'>温度</th>";
        var sendOption =
        {
            begindate: "",       //开始日期
            enddate: "",        //结束日期
            sendpoints: [],     //起报时刻
            wthspans: [],       //降雨时效
            tempspans: [],      //气温时效
            membertable: membertable.type,    //比较表
            standardtable: "",  //标准表
            stations: "",        //站点
            tid: getGuidGenerator()              //任务id
        };//发送请求参数
        //搜索
        function Search() {
            $("#rainbody").empty();
            $("#tbody").empty();
            var random = getGuidGenerator();
            tid = random;
            sendOption.tid = random;

            sendOption.begindate = $("#time_begin").val();
            sendOption.enddate = $("#time_end").val();
            sendOption.standardtable = $(".product:checked").val();
            updateRainSpan();
            updateSendPoint();
            updateTempSpan();
            updateStation();
            if (sendOption.standardtable == "") {
                return;
            }
            if (sendOption.begindate == "" || sendOption.enddate == "") {
                return;
            }
            if (sendOption.membertable == "") {
                location.href = "/Check/index.aspx";
            }
            if (sendOption.sendpoints.length == 0) {
                return;
            }
            if (sendOption.stations.length == 0) {
                return;
            }
            if (sendOption.tempspans.length == 0) {
                return;
            }
            if (sendOption.wthspans.length == 0) {
                return;
            }
            Tip("");
            var station = sendOption.stations.join(",");
            var sendpoints = sendOption.sendpoints.reverse().join(",");
            var wthspans = sendOption.wthspans.reverse().join(",");
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: "<%:Interface %>?begindate=" + sendOption.begindate + "&enddate=" + sendOption.enddate + "&sendpoints=" + sendpoints + "&wthspans=" + wthspans + "&tempspans=" + sendOption.tempspans.reverse().join(",") + "&membertable=" + sendOption.membertable + "&standardtable=" + sendOption.standardtable + "&stations=" + sendOption.stations.join(",") + "&tid=" + sendOption.tid + "&filterdate="+filter_date,

                success: function (data) {

                    //var preJson = data + "";
                    // preJson = preJson.substring(1, preJson.length - 1);
                    var json = data;//JSON.parse(preJson);
                    if (json.success == "True") {
                        var wthData = json.result.data.wth; //天气数据
                        
                        var tmpData = json.result.data.temp; //气温数据
                        
                        DrawRainTable(wthData);
                        DrawTempHTML(tmpData);
                        $(".bar").css("width", "100%");
                        $("#tip").fadeOut();
                    }
                    else {
                        alert(data.msg)
                    }
                    clearInterval(readswitch);
                    errorTimes = 0;
                }
            })
        }


        
        //Search();
        //更新发送参数中的发报时刻
        function updateSendPoint() {
            sendOption.sendpoints = [];
            $(".chx_point").each(function () {
                if (this.checked) {
                    sendOption.sendpoints.push($(this).val());
                }
            })
            sendOption.sendpoints = sendOption.sendpoints.reverse();
        }
        //更新发送参数中的降水时效
        function updateRainSpan() {
            sendOption.wthspans = [];
            $(".chx_rain").each(function () {
                if (this.checked) {
                    sendOption.wthspans.push($(this).val());
                }
            })
            sendOption.wthspans = sendOption.wthspans.reverse();
        }
        //更新发送参数中的气温时效
        function updateTempSpan() {
            sendOption.tempspans = [];
            $(".chx_temp").each(function () {
                if (this.checked) {
                    sendOption.tempspans.push($(this).val());
                }
            })
            sendOption.tempspans = sendOption.tempspans.reverse();
        }
        //更新发送参数中的站点
        function updateStation() {
            sendOption.stations = [];
            $(".chx_site").each(function () {
                if (this.checked) {
                    sendOption.stations.push($(this).val());
                }
            })
            sendOption.stations = sendOption.stations.reverse();
        }

        //绘制表头非服务器返回数据部分
        function DrawTable() {
            $("#rainbody").empty();
            $("#tbody").empty();
            var RainSpan = new Array(); //降水时效
            var TempSpan = new Array(); //气温时效
            $(".chx_rain").each(function (index) {
                if (this.checked) {
                    RainSpan.push($(this).data("header"));
                }
            })
            $(".chx_temp").each(function (index) {
                if (this.checked) {
                    TempSpan.push($(this).data("header"));
                }
            })
            var RainHeader = "", TempHeader = "", RainSubTitle = "", TempSubTitle = "";
            for (var i = 0; i < RainSpan.length; i++) {
                RainHeader += (header.replace("{TEXT}", RainSpan[i]));
                RainSubTitle += raintitle;
            }
            for (var i = 0; i < TempSpan.length; i++) {
                TempHeader += (theader.replace("{TEXT}", TempSpan[i]));
                TempSubTitle += temptitle;
            }
            $("#rain_header").empty().append(rainleft); //添加降雨分级文字
            $("#rain_header").append($(RainHeader)); //添加第一行
            $("#rain_sub_title").empty().append($(RainSubTitle)); //添加第二行
            $("#temp_header").empty().append(templeft);
            $("#temp_header").append($(TempHeader));
            $("#temp_sub_title").empty().append($(TempSubTitle));
            //Search();
        }

        //转换json格式
        function ConvertJsonToRight() {

        }
        Search();

        //页面加载之后，绑定日期选择器-处理页面全选按钮逻辑-降雨时效-气温时效绑定表头--相应条件改变更新sendOptions
        $(function () {

            // datepicker plugin
            $('.datepicker').datepicker({ format: 'yyyy-mm-dd' }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });


            //全选事件
            $("#chx_point_all").click(function () {
                if (this.checked) {
                    $(".chx_point").each(function () {
                        this.checked = true;
                    })
                }
                else {
                    $(".chx_point").each(function () {
                        this.checked = false;
                    })
                }
            })



            $("#chx_rain_all").click(function () {
                if (this.checked) {
                    $(".chx_rain").each(function () {
                        this.checked = true;
                    })
                }
                else {
                    $(".chx_rain").each(function () {
                        this.checked = false;
                    })
                }
            })

            $("#chx_temp_all").click(function () {
                if (this.checked) {
                    $(".chx_temp").each(function () {
                        this.checked = true;
                    })
                }
                else {
                    $(".chx_temp").each(function () {
                        this.checked = false;
                    })
                }
            })

            $("#chx_site_all").click(function () {
                if (this.checked) {
                    $(".chx_site").each(function () {
                        this.checked = true;
                    })
                }
                else {
                    $(".chx_site").each(function () {
                        this.checked = false;
                    })
                }
            })

            $(".chx_site").click(function () {
                var all = true;
                $(".chx_site").each(function () {
                    if (!this.checked) {
                        all = false;
                    }
                })
                if (all) {
                    document.getElementById("chx_site_all").checked = true;
                } else {
                    document.getElementById("chx_site_all").checked = false;
                }
            })

            $(".chx_temp").click(function () {
                var all = true;
                $(".chx_temp").each(function () {
                    if (!this.checked) {
                        all = false;
                    }
                })
                if (all) {
                    document.getElementById("chx_temp_all").checked = true;
                } else {
                    document.getElementById("chx_temp_all").checked = false;
                }
            })

            $(".chx_rain").click(function () {
                var all = true;
                $(".chx_rain").each(function () {
                    if (!this.checked) {
                        all = false;
                    }
                })
                if (all) {
                    document.getElementById("chx_rain_all").checked = true;
                } else {
                    document.getElementById("chx_rain_all").checked = false;
                }

            })
            $(".chx_point").click(function () {
                var all = true;
                $(".chx_point").each(function () {
                    if (!this.checked) {
                        all = false;
                    }
                })
                if (all) {
                    document.getElementById("chx_point_all").checked = true;
                } else {
                    document.getElementById("chx_point_all").checked = false;
                }

            })

            $(".chx_rain,.chx_temp,#chx_rain_all,#chx_temp_all").click(function () {
                DrawTable();
            })

            $("#btn_search").click(function () {
                Search();
            });
            DrawTable();
        });




    </script>
</asp:Content>
